<template>
	<div class="system-user-dialog-container">
		<el-dialog :close-on-click-modal="false" :title="dTitle" draggable v-model="visible">
			<el-form :model="dataForm"  :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
				<el-row :gutter="20">
					<el-col :span="24" class="mb20">
						<el-form-item label="组态名称" prop="scadaName">
							<el-input placeholder="请输入组态名称" v-model="dataForm.scadaName"  :disabled="disabled"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" class="mb20">
						<el-form-item label="选择文件" >
							<!-- <el-upload
								ref="fileUpload"
								action="#"
								accept=".rar, .zip"
								:limit="1"
								:auto-upload="false"
								v-model:file-list="dataForm.fileList"
								:on-change="handleChange"
								class="upload-file-uploader"
								drag
							>
								<i class="el-icon-upload"></i>
								<div class="el-upload__text">
									{{ $t('excel.operationNotice') }}
									<em>{{ $t('excel.clickUpload') }}</em>
								</div>
							</el-upload> -->
							<upload-file uploadFileUrl="/admin/scadaFile/localUpload" :disabled="disabled" v-model:model-value="dataForm.fileUrl" @change="handleChange" :fileType="['.rar', '.zip']" :limit="1"></upload-file>
						</el-form-item>
					</el-col>
					<el-col :span="12" class="mb20">
						<el-form-item label="组态图片" >
							<!-- <el-upload action="#" :auto-upload="false" v-model:file-list="dataForm.imgList" list-type="picture-card" accept=".jpg, .png, jpeg" :on-change="handleChange1" :limit="1">
								<el-icon><Plus /></el-icon>
								<template #file="{ file }">
									<div>
										<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
										<span class="el-upload-list__item-actions">
											<span
												class="el-upload-list__item-preview"
												@click="handlePictureCardPreview(file)"
											>
												<el-icon><zoom-in /></el-icon>
											</span>
											
											<span
												class="el-upload-list__item-delete"
												@click="handleRemove(file)"
											>
												<el-icon><Delete /></el-icon>
											</span>
										</span>
									</div>
								</template>
							</el-upload> -->
							<upload-img uploadFileUrl="/admin/scadaFile/localUpload" :disabled="disabled" v-model:image-url="dataForm.imageUrl" @update:imageUrl="handleChange1" width="100px" height="100px"></upload-img>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer" v-show="show">
					<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
					<el-button @click="onSubmit" type="primary" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="dialogVisible">
			<img w-full :src="dialogImageUrl" alt="Preview Image" />
		</el-dialog>
	</div>
</template>

<script lang="ts" name="systemUserDialog" setup>

import { addObj, putObj } from '/@/api/basiciot/iconfiguration/list';
import { useI18n } from 'vue-i18n';
import { useMessage } from '/@/hooks/message';

const { t } = useI18n();

// 定义刷新表格emit
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
const dataForm = reactive({
	scadaName: '',
	id: '',
	imageUrl: '',
	imgName: '',
	fileName: '',
	fileUrl: '',
});

let show = ref(true)
let dTitle = ref(t('common.addBtn'))
let disabled = ref(false)
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

// const uploadImg = ref()

const dataRules = ref({
	// 用户名校验，不能为空 、长度 5-20、不能和已有数据重复
	scadaName: [
		{ required: true, message: '组态名称不能为空', trigger: 'blur' }
	]
});

// 打开弹窗
const openDialog = async (row: any, type:string) => {
	visible.value = true;
	if(type == 'detail') {
		show.value = false
		dTitle.value = '详情'
		disabled.value = true
	} else {
		dTitle.value = row && row.id ? t('common.editBtn') : t('common.addBtn')
		disabled.value = false
		show.value = true
	}

	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
		// 修改获取用户信息
		if (row && row.id) {
			dataForm.id = row.id;
			dataForm.scadaName = row.scadaName
			dataForm.imageUrl = row.imageUrl
			dataForm.fileUrl = row.fileUrl
			dataForm.imgName = row.imageUrl.split('=')[1]
			dataForm.fileName = row.fileUrl.split('=')[1]
			// await getUserData(id);
		} else {
			dataForm.id = '';
			dataForm.scadaName = ''
			dataForm.imageUrl = ''
			dataForm.fileUrl = ''
			dataForm.imgName = ''
			dataForm.fileName = ''
		}
	});
	
	

};
// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
		const { id} = dataForm;

		if (id) {

			loading.value = true;
			await putObj(dataForm);
			useMessage().success(t('common.editSuccessText'));
			visible.value = false; // 关闭弹窗
			emit('refresh');
		} else {
			
			loading.value = true;
			// let formData = new FormData();
			// formData.append('scadaName', dataForm.scadaName);
      // formData.append('file', dataForm.file);
			// formData.append('img', dataForm.img);
			delete dataForm.id
			await addObj(dataForm);
			useMessage().success(t('common.addSuccessText'));
			visible.value = false; // 关闭弹窗
			emit('refresh');
		}
	} catch (error: any) {
		useMessage().error(error.msg);
	} finally {
		loading.value = false;
	}
};



const handleChange = (file:any) => {
	dataForm.fileUrl = file
	dataForm.fileName = file.substring(file.lastIndexOf('/')+1)
}
const handleChange1 = (file:any) => {
	// dataForm.imageUrl = file.raw
	dataForm.imgName = file.split('=')[1]
}

// const handleRemove = (file: UploadFile) => {
//   console.log(file)
// 	dataForm.imgList = []
// }

// const handlePictureCardPreview = (file: UploadFile) => {
//   dialogImageUrl.value = file.url!
//   dialogVisible.value = true
// }


// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style lang="scss" scoped>
:deep(.el-upload-dragger .el-upload__text em) {
	color: inherit;
}

:deep(.el-upload-list--picture-card){
	.el-upload--picture-card {
		background-color: var(--el-fill-color-blank);	
	}
}

:deep(.upload-file) {
	width: 100%;
}
</style>